import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/login.vue'
import Main from '../views/Main/Main.vue'
import Home from '../views/Home/Home.vue'
import User from '../views/User/User.vue'
import Search from '../views/Search/Search.vue'
import SearchResults from '@/views/Search/SearchResults.vue'
import ArticleDetail from '@/views/ArticleDetail/ArticleDetail.vue'
import UserEdit from '@/views/User/userEdit.vue'
import Chat from '@/views/Chat/Chat.vue'
import store from '@/store/index.js'

Vue.use(VueRouter)

const routes = [
  {
    path: '/login',
    name: 'login',
    component: Login
  },
  // 主页的路由规则
  {
    path: '/',
    component: Main,
    children: [{
      path: '', // 不写就是默认路由 会默认显示此路由对应的组件
      name: 'Home',
      component: Home,
      meta: { isScrollRecord: true, top: 0 } // 元信息, 第一个isScrollRecord 可以理解为判断是哪个组件来得(身份认证?),top是滚动距离
    }, {
      path: 'user',
      name: 'User',
      component: User
    }]
  },
  // 搜索页路由规则
  {
    path: '/search',
    name: 'Search',
    component: Search
  },
  // 搜索结果页
  {
    path: '/search/:kw',
    name: 'search-results',
    component: SearchResults,
    props: true // 开启路由通道
  },
  // 文章详情页
  {
    path: '/article/:id',
    name: 'article-detail',
    component: ArticleDetail,
    props: true
  },
  // 用户编辑页
  {
    path: '/user/edit',
    name: 'user-edit',
    component: UserEdit
  },
  // 小思同学
  {
    path: '/chat',
    name: 'Chat',
    component: Chat
  }
]

// 解决 vue-router 内部的报错的问题：

// 1. 将 VueRouter 本身提供的 $router.push 方法转存到常量中
const originalPush = VueRouter.prototype.push
// 2. 自定义 $router.push 方法，在内部调用原生的 originalPush 方法进行路由跳转；并通过 .catch 捕获错误
VueRouter.prototype.push = function push (location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  // 通过 .catch 捕获错误
  return originalPush.call(this, location).catch(err => err)
}

const router = new VueRouter({
  routes
})

// 用来存放需要通行认证的path
const pathArr = ['/user', '/user/edit']
router.beforeEach((to, from, next) => {
  // 判断from中是否包含元信息
  if (from.meta.isScrollRecord) { // 这一步就是一个判断可以理解为如果是从home页过来的
    from.meta.top = window.scrollY// Y轴滚动的距离
  }
  if (pathArr.indexOf(to.path) !== -1) {
    // 判断是否有权限访问这两个页面,通过token来进行判断
    // 然后再判断是否有token,如果有就可以跳转到user和userEdit页面
    // 如果没有就跳回到;login页面
    const tokenStr = store.state.tokenInfo.token

    if (tokenStr) { // 如果有token 就可以跳转到user和userEdit页面
      next()
    } else {
      // next('/login') // 没有就跳转到登录页
      // to.fullPath 访问未遂的路由对象地址 (因为不一定只跳转到登录页)
      next('/login?pre=' + to.fullPath) // 没有就跳转到登录页并保存访问未遂的地址,以一个query参数的形式
    }
  } else {
    // 访问的是不需要权限的页面,直接放行
    next()
  }
})

export default router
